<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 900px;
            width: 100%;
            background-image: url(/images/backgroud.png);
            background-repeat: no-repeat;
            background-size: cover; /* 或者使用 'contain' */
            background-position: center center; /* 使图片在容器中居中 */
        }
        a {
            color: blue;
            text-decoration: none;
        }
        #bigBox {
            position: absolute;
            top: 50%; /* 移动到父容器的垂直中点 */
            left: 50%; /* 移动到父容器的水平中点 */
            transform: translate(-50%, -50%); /* 向左和向上移动元素自身宽度和高度的一半 */
            margin: 0; /* Remove the auto margins since we're using absolute positioning */
        }

        #bigBox h1 {
            font-size: 40px;
            color: blue;
        }
        #bigBox .inputBox {
            margin-top: 35px;
        }
        #bigBox .inputBox .inputText {
            margin-top: 20px;
        }
        #bigBox .inputBox .inputText input {
            border: 0;
            padding: 10px 10px;
            border-bottom: 1px solid blue;
            background-color: #00000000;
            color: blue;
            width: 200px;
            height: 40px;
            font-size: 20px;
        }
        #bigBox .inputBox .inputText i {
            color: blue;
        }
        #bigBox .inputBox .inputButton {
            border: 0;
            width: 200px;
            height: 50px;
            color: blue;
            margin-top: 55px;
            border-radius: 20px;
            background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
        }
    </style>
</head>
<body>
<div id="bigBox">
    <h1>修改个人资料</h1>
    <div class="inputBox">
        <form id="editForm" th:action="@{/upUser}" method="POST">
            <div class="inputText">
                <i class="fa fa-id-card" style="color: whitesmoke;"></i>
                <input type="text" id="id" name="id" required placeholder="用户Id" th:value="${user.id}" />
            </div>
            <div class="inputText">
                <i class="fa fa-user" style="color: whitesmoke;"></i>
                <input type="text" id="username" name="username" required placeholder="用户名" th:value="${user.username}" />
            </div>
            <div class="inputText">
                <i class="fa fa-user-circle" style="color: whitesmoke;"></i>
                <input type="text" id="name" name="name" required placeholder="姓名" th:value="${user.name}" />
            </div>
            <div class="inputText">
                <i class="fa fa-phone" style="color: whitesmoke;"></i>
                <input type="text" id="telephone" name="telephone" required placeholder="电话" th:value="${user.telephone}" />
            </div>
            <div class="inputText">
                <i class="fa fa-key" style="color: whitesmoke;"></i>
                <input type="password" id="password" name="password" required placeholder="重置密码" />
            </div>
            <div class="inputText">
                <i class="fa fa-venus-mars" style="color: whitesmoke;"></i>
                <input type="text" id="sex" name="sex" required placeholder="性别" th:value="${user.sex}" />
            </div>
            <input type="submit" class="inputButton" value="保存更改" />
        </form>
    </div>
</div>
</body>
</html>